<template>
	<view class="new-users">
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<u-navbar :placeholder="true" bgColor="#FF4110" title="个人中心" :titleStyle="{
				color:' #fff'
			}" :border-bottom="false" leftIconColor="transparent">
			</u-navbar>
			<!-- #endif -->
		</view>
		<view class="head">
			<view class="user-card">
				<view class="bg"></view>
				<view class="user-info">
					<view class="avatar-box">
						<u-avatar :src="avatar" size="128rpx"></u-avatar>
					</view>
					<view class="info" v-if="!!token">
						<view class="name" @click="$u.throttle(toUserSet, 500)">
							{{userInfo.name}}
						</view>
						<view class="flex">
							<view class="tag">
								{{status}}
							</view>
							<view class="tag" style="margin-left: 10rpx;">
								{{gradeId?'会员用户':'普通用户'}}
							</view>
						</view>
					</view>
					<view class="info" style="flex-direction:row;" v-else>
						<view class="name" @click="$u.throttle(toUserSet, 500)">
							请先登录
						</view>
					</view>
					<view class="icon" @click="$u.throttle(toUserSet, 500)">
						<u-icon name="setting" color="#fff" size="22"></u-icon>
					</view>
					<!-- <view class="icon">
						<u-icon name="bell" color="#fff" size="22"></u-icon>
					</view> -->
				</view>
				<view class="num-wrapper">
					<view class="num-item" @click="$u.throttle(toAuthPage('/pages/users/user_coupon/index'), 500)">
						<view class="num">
							{{couponNum}}
						</view>
						<view class="text">
							优惠券
						</view>
					</view>
					<view class="num-item" @click="$u.throttle(toAuthPage('/pages/users/user_money/index'), 500)">
						<view class="num">
							100
						</view>
						<view class="text">
							我的钱包
						</view>
					</view>
					<view class="num-item" @click="$u.throttle(toAuthPage('/pages/users/user_specie/index'), 500)">
						<view class="num">
							{{oilCoin || 0}}
						</view>
						<view class="text">
							加油币
						</view>
					</view>
				</view>
				<view class="cardVipA flex-center flex-around">
					<view class="left-box">
						<view class="small">
							认证享好礼
						</view>
					</view>
					<view class="flex">
						<view class="btn"
							@click="$u.throttle(toAuthPage('/pages/users/user_certification/index'), 500)">
							立即认证
						</view>
						<view class="iconfont custom-icon-youjiantou-copy custom-icon"></view>
					</view>
				</view>

			</view>
		</view>

		<view class="order w94 mt10">
			<view class="order-hd flex-between ">
				<text class="left">订单中心</text>
				<view class="right " @click="$u.throttle(orderGridsHandler(0), 500)">
					查看全部
					<u-icon name="arrow-right" size="12" color="#777777"></u-icon>

				</view>
			</view>
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(item,index) of orderGrids" :key="index"
					@click="$u.throttle(orderGridsHandler(index), 500)">
					<u-icon size="25" customPrefix="custom-icon" :name="item.icon" color="#333"></u-icon>
					<view style="margin-top: 12rpx;color: #333;font-size: 12px;">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="user-menus w94">
			<view class="menu-title">我的服务</view>
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(item,index) of serviceGrids" :key="index"
					@click="$u.throttle(toAuthPage(item.url), 500)" :customStyle="{width:120+'rpx',height:120+'rpx'}">
					<u-icon size="25" :name="item.icon" color="#333"></u-icon>
					<!-- <u-icon size="25" customPrefix="custom-icon" :name="item.icon" color="#333"></u-icon> -->
					<view class="subTitle">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
		</view>


	</view>
	<TabBar :tabValue="2" />
	<!-- {{token}} -->
	<!-- <u-button type="primary" @click="test">测试</u-button> -->
</template>
<script setup>
	import API from "@/api/index.js"
	import TabBar from "@/components/tabbar/index.vue"
	import {
		reactive,
		ref
	} from "vue"
	import {
		useUserStore
	} from "@/store/index"
	import {
		storeToRefs
	} from 'pinia'
	const {
		token,
		userInfo
	} = storeToRefs(useUserStore())
	import {
		onShow,
	} from '@dcloudio/uni-app';
	onShow(async () => {
		uni.hideTabBar()
		gradeId.value = uni.getStorageSync('userInfo').gradeInfo.name.indexOf("vip")!=-1?true:false
		if (uni.getStorageSync('userInfo').id && uni.getStorageSync('userInfo').idIsAudit) {
			// 已经认证过 从登录接口获取到的信息
			console.log("已认证过");
			status.value = '已认证'
			avatar.value = uni.getStorageSync('userInfo').portraitImage
		} else if (uni.getStorageSync('idAuth')) {
			// 第一次认证后 从本地存储获取到的信息
			console.log("show uni.getStorageSync('idAuth')", uni.getStorageSync('idAuth'));
			avatar.value = uni.getStorageSync('idAuth').portraitImage
			status.value = '已认证'
		}

		if (token.value) {
			let res = await API.userCouponList({
				"pageIndex": 1,
				"pageSize": 10,
				"condition": [{
					"filedIndex": "uId",
					"filedValue": uni.getStorageSync('userInfo').id
				}]
			})
			couponNum.value = res.data.total
		}
	})
	// 加油币
	let oilCoin = ref(uni.getStorageSync('uesrInfo').oilCoin)
	// 用户头像
	let avatar = ref('https://v4.crmeb.net/uploads/store/comment/20230819/8fe37a89e638c20655b3c5459d0f54dd.jpg')
	// 是否认证
	let status = ref('未认证')
	// 会员等级
	let gradeId = ref(false)
	// 优惠券数量
	const couponNum = ref(0)
	/* 订单中心 */
	const orderGrids = reactive([{
			icon: 'daizhifu',
			title: '待发货',
			tab: 0
		},
		{
			icon: 'daifahuo',
			title: '待收货',
			tab: 1
		},
		// {
		// 	icon: 'daishouhuo',
		// 	title: '退货',
		// 	tab: 2
		// },
		{
			icon: 'shouhou',
			title: '待评价',
			tab: 2
		}
	]);
	const orderGridsHandler = (index) => {
		uni.navigateTo({
			url: `/pages/goods/order_list/index?status=${index}`
		})
	}
	/* 我的服务 */
	const serviceGrids = reactive([{
			icon: 'map',
			// icon: 'dizhiguanli',
			title: '地址信息',
			url: '/pages/users/user_address_list/index'
		}, {
			icon: 'list-dot',
			title: '车辆管理',
			url: '/pages/users/user_car_list/index'
		},
		{
			icon: 'account',
			// icon: 'gerenxinxi-',
			title: '个人认证',
			url: '/pages/users/user_certification/index'
		},
		{
			icon: 'man-add',
			title: '油站合作',
			url: '/pages/users/partner/index'
		},
		{
			icon: 'order',
			title: '返现记录',
			url: '/pages/users/cashback-record/index'
		},
		{
			icon: 'file-text',
			title: '油币账单',
			url: '/pages/users/oil-bill/index'
		},
		// {
		// 	icon: 'gerenxinxi-',
		// 	title: '后台管理 ',
		// 	url: '/pages/users/management/index'
		// },
	])


	const toUserInfo = () => {
		console.log(!!token.value)
		if (!!token.value) {

		} else {
			uni.navigateTo({
				url: '/pages/users/login/index'
			})
		}
	}
	const toUserSet = () => {
		if (token.value == '') {
			uni.navigateTo({
				url: '/pages/users/login/index'
			})
		} else {
			uni.navigateTo({
				url: "/pages/users/user_set/index"
			})
		}
	}
	const toAuthPage = (url) => {
		console.log(url)
		if (token.value == '') {
			uni.navigateTo({
				url: '/pages/users/login/index'
			})
		} else {
			uni.navigateTo({
				url
			})
		}
	}

	const test = () => {
		token.value = ''
	}
</script>
<style>
	.user-menus>>>.u-grid {
		margin-left: 35rpx !important;
	}
</style>
<style lang="scss">
	.new-users {
		display: flex;
		flex-direction: column;
		height: 100%;

		.sys-head {
			position: relative;
			width: 100%;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: $u-primary;
				background-size: 100% auto;
				background-position: left bottom;
			}

			.sys-title {
				z-index: 10;
				position: relative;
				height: 43px;
				text-align: center;
				line-height: 43px;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}

		.head {
			.user-card {
				position: relative;
				margin: 0 auto;
				padding: 20px 16px;
				padding-bottom: 0px;
				height: 380rpx;

				background-image: url(https://v5.crmeb.net/static/images/user01.png);
				background-size: 100% auto;
				background-color: #ff4110;

				.user-info {
					z-index: 20;
					position: relative;
					display: flex;

					.avatar-box {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 68px;
						height: 68px;
						border-radius: 50%;

						image {
							position: relative;
							width: 68px;
							height: 68px;
							border-radius: 50%;
						}
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 11px;
						padding: 11px 0;

						.name {
							display: flex;
							align-items: center;
							color: #fff;
							font-size: 17px;
						}

						.tag {
							margin-top: 6px;
							background: hsla(0, 0%, 100%, .3);
							border-radius: 30px;
							width: -webkit-max-content;
							width: max-content;
							text-align: center;
							font-size: 11px;
							font-weight: 400;
							color: #fff;
							line-height: 15px;
							padding: 3px 8px;
						}
					}

					.icon {
						align-self: flex-start;
						position: relative;
						margin-top: 8px;
						margin-right: 11px;
					}
				}

				.num-wrapper {
					z-index: 30;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 12px;
					color: #fff;

					.num-item {
						width: 33.33%;
						text-align: center;

						&~.num-item {
							position: relative;

							&:before {
								content: '';
								position: absolute;
								width: 1rpx;
								height: 28rpx;
								top: 50%;
								margin-top: -14rpx;
								background-color: rgba(255, 255, 255, 0.4);
								left: 0;
							}
						}

						.num {
							font-size: 20px;
							font-weight: 700;
						}

						.text {
							margin-top: 4px;
							font-size: 14px;
							color: hsla(0, 0%, 100%, .6);
						}
					}
				}

				.cardVipA {
					position: absolute;
					background: url('https://v5.crmeb.net/static/images/member.png') no-repeat;
					background-size: 100% 100%;
					width: 750rpx;
					height: 84rpx;
					bottom: -2rpx;
					left: 0;
					// padding: 0 56rpx 0 135rpx;

					.left-box {
						font-size: 26rpx;
						color: #905100;
						font-weight: 400;
					}

					.btn {
						color: #905100;
						font-weight: 400;
						font-size: 24rpx;
					}

					.iconfont {
						color: #905100;
						font-size: 20rpx;
						margin: 4rpx 0 0 4rpx;
					}
				}


			}
		}

		.order {
			background: #fff;
			border-radius: 9px;
			padding-bottom: 20rpx;

			.order-hd {
				justify-content: space-between;
				padding: 20rpx 11px 15px 17px;
				// font-size: 17px;
				color: #282828;

				.left {
					// font-weight: 700;
					font-size: 16px;
				}

				.right {
					display: flex;
					align-items: center;
					color: #666;
					font-size: 12px;

					.text {
						vertical-align: middle;
					}
				}
			}

		}

		.user-menus {
			background-color: #fff;
			border-radius: 18rpx;
			padding-bottom: 20rpx;
			margin-top: 20rpx;

			.menu-title {
				padding: 20rpx 11px 15px 17px;
				font-size: 16px;
				color: #282828;
			}

			.subTitle {
				margin-top: 12rpx;
				color: #333;
				font-size: 12px;
			}
		}
	}

	:deep(.u-grid-item-box) {
		padding-bottom: 0px !important;
	}
</style>